<template>
	<div class="borderAnimation" :style="BorderComputed">
		边框动画001
	</div>
</template>

<script>
	import {} from 'vue'
	export default {
		props: {
			// 盒子宽度
			width: {
				type: String,
				default: "400px"
			},
			// 盒子高度
			height: {
				type: String,
				default: "200px"
			},
			// 内边框内边距
			borderPadding: {
				type: String,
				default: "10px"
			},
			// 边框圆角度
			borderRadius: {
				type: String,
				default: "10px"
			},
			// 边框光效大小 （需要计算  width* 98% = height * X）
			borderLightWidth: {
				type: String,
				default: "2" // 2 是2%  会转化为 width:98%  height:根据宽高比例去计算
			},
			// 文字颜色
			color: {
				type: String,
				default: "#fff"
			},
			// 背景颜色
			bgColor: {
				type: String,
				default: "#000"
			},
			// 盒子过渡动画时长
			transitionHover: {
				type: String,
				default: ".3s"
			},
			// 遮罩层背景颜色
			maskColor: {
				type: String,
				default: "rgba(0,0,0,0.5)"
			}
		},
		name: "borderAnimation",
		computed: {
			BorderComputed() {
				let wid = this.width.toString().slice(0, -2),
					hei = this.height.slice(0, -2);
				let paddingWidth = wid - (100 - this.borderLightWidth) / 100 * wid
				let borerLightHeight = (hei - paddingWidth) / hei * 100
				// console.log(paddingWidth, borerLightHeight)
				let obj = {
					'--width': this.width,
					'--height': this.height,
					'--borderPadding': this.borderPadding,
					'--borderRadius': this.borderRadius,
					'--color': this.color,
					'--bgColor': this.bgColor,
					'--transitionHover': this.transitionHover,
					'--maskColor': this.maskColor,
					'--borerLightWidth': (100 - this.borderLightWidth) + '%',
					'--borerLightHeight': borerLightHeight + "%"
				}
				return obj
			}
		},
		setup() {

			return {

			}
		}
	}
</script>


<style>
	@keyframes borderAnimation_rotate {
		from {
			transform: translate3d(-50%, -50%, 0) rotate(0deg);
		}

		to {
			transform: translate3d(-50%, -50%, 0) rotate(360deg);
		}
	}
</style>
<style scoped="scoped" lang="less">
	.borderAnimation {
		box-sizing: border-box;
		position: relative;
		cursor: pointer;
		user-select: none;
		overflow: hidden;
		text-align: center;


		width: var(--width);
		height: var(--height);
		padding: var(--borderPadding);
		border-radius: var(--borderRadius);
		color: var(--color);
		background-color: var(--bgColor);
		transition: all var(--transitionHover);
	}

	.borderAnimation::before {
		content: "";
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate3d(-50%, -50%, 0);
		height: var(--borerLightHeight);
		width: var(--borerLightWidth);
		z-index: 99;
		border-radius: 10px;
		background-color: var(--maskColor);
	}


	.borderAnimation::after {
		content: "";
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate3d(-50%, -50%, 0);
		height: 250%;
		width: 250%;
		background: conic-gradient(transparent, rgba(168, 239, 255, 1), transparent 30%);
		animation: borderAnimation_rotate 4s linear infinite;
	}
</style>
